<template>
    <div style="height: 100vh;"> 
        <div class="header" >
            <div style="margin-left:60px;">
                <img src="favicon.svg" style="height: 48px;"/>
            </div>
            <div style="font-size: 24px;font-weight: bolder;margin-left: 10px;">运维工单系统(WOS)</div>
        </div>
        
        <div style="display: flex;">

            <!--左侧导航栏-->
            <div class="menu"> 
                <el-menu :default-active="$route.path" class="el-menu-vertical-demo" :collapse="isCollapse">
                    <el-sub-menu index="1">
                        <template #title>
                            <el-icon><HomeFilled /></el-icon>
                            <span>工单系统</span>
                        </template>
                        <el-menu-item index="1-1">
                            <el-icon><el-icon><Tickets /></el-icon></el-icon>
                            <span>我的工单</span> 
                        </el-menu-item>
                        <el-menu-item index="1-2">
                            <el-icon><Edit /></el-icon>
                            <span>创建工单</span>
                        </el-menu-item>
                        <el-menu-item index="1-3">
                            <el-icon><Histogram /></el-icon>
                            <span>任务列表</span>
                        </el-menu-item>
                    </el-sub-menu>
                    
                    <el-sub-menu index="2">
                        <template #title>
                            <el-icon><Setting/></el-icon>
                            <span>系统设置</span>
                        </template>
                        <el-menu-item index="2-1">
                            <el-icon><Key /></el-icon>
                            <span>密码重置</span>
                        </el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </div>
    
            <!--内容主体-->
            <div class="main" style="flex:1;width:0">
                <div style="padding: 10px;border-bottom: 1px solid #C0C4CC;"> 
                    <span @click="swichNavigation">  
                        <el-icon size="18px" v-if="!isCollapse"><Fold /></el-icon>
                        <el-icon size="18px" v-else><Expand /></el-icon>
                    </span>

                    <el-dropdown style="float: right;">
                        <a class="el-dropdown-link">
                            欢迎您, admin
                            <el-icon><arrow-down /></el-icon>
                        </a>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>退出系统</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script setup> 
import {
    Tickets,
    HomeFilled,
    Edit,
    Key,
    Histogram,
    Setting,
    Fold,
    Expand,
    ArrowDown 
} from '@element-plus/icons-vue'
import {ref} from 'vue'

const isCollapse = ref(false)
const swichNavigation = ()=>{
    isCollapse.value = !isCollapse.value
}

</script>

<style scoped>

.header{
    background-color:#C0C4CC;
    height: 60px;
    display: flex;
    border-bottom: 1px solid#C0C4CC;
    align-items:center;
    /* justify-content:center */
}
/* 
.menu{
    
} */

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}

.el-menu-vertical-demo {
  min-height: calc(100vh - 60px);
}


 .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
  outline: 0;
}

</style>